<template>
	<view class="serve-new">
		<view class="topbg syspadding" id="topBox">
			<view class="acea-row px30 mt-20">
				<text class="title bold">服务</text>
				<text class="subtitle">请选择您需要的服务</text>
			</view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" class="scroll-y" :style="'height:'+scrollviewHigh+'px;'">
				<view class="banshui bold">办税</view>
				<view class="bs-nav">
					<view class="px20">
						<view class="item">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/af98f22a3f61495056cc2d55b6a19d9a.png" mode=""></image>
						</view>
						<view class="item">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/3837cdd665ebd08d9637056cc49692f7.png" mode=""></image>
						</view>
					</view>
					<view class="meun px20 acea-row row-between-wrapper">
						<view class="mpic" @click="pathClick('/')">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/ecea36ac81d79aa4dc11c1373d8bdb1d.png" mode=""></image>
						</view>
						<view class="mpic" @click="pathClick('/pages/index/bill-Issue')">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/856a6f42b7f08de6a215afba9e295239.png" mode=""></image>
						</view>
						<view class="mpic" @click="pathClick('/')">
							<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/425f7b189f1616869132752e75dc76d0.png" mode=""></image>
						</view>
					</view>
					<view class="bs-bott">
						<image class="imgwh" src="http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/d3e16b82c81936e19c4a805092a724e3.png" mode=""></image>
					</view>
				</view>
				<view class="banshui bold mt30">查询</view>
				<view class="bs-box acea-row mt30">
					<block v-for="(item,index) in chaxun" :key="index">
						<view class="item" @click="pathClick(item.link)">
							<view class="pic">
								<image class="imgwh" :src="item.pic" mode=""></image>
							</view>
							<view class="title">{{ item.title }}</view>
							<view class="subtitle">{{ item.subtitle }}</view>
						</view>
					</block>
				</view>
				<view class="banshui bold mt30">发票管理</view>
				<view class="bs-box acea-row mt30">
					<block v-for="(item,index) in fapiao" :key="index">
						<view class="item" @click="pathClick(item.link)">
							<view class="pic">
								<image class="imgwh" :src="item.pic" mode=""></image>
							</view>
							<view class="title">{{ item.title }}</view>
							<view class="subtitle">{{ item.subtitle }}</view>
						</view>
					</block>
				</view>
				<view class="banshui bold mt30">公众服务</view>
				<view class="bs-box acea-row mt30">
					<block v-for="(item,index) in fuwu" :key="index">
						<view class="item" @click="pathClick(item.link)">
							<view class="pic">
								<image class="imgwh" :src="item.pic" mode=""></image>
							</view>
							<view class="title">{{ item.title }}</view>
							<view class="subtitle">{{ item.subtitle }}</view>
						</view>
					</block>
				</view>
				<view style="width: 100%;height: 200rpx;"></view>
			</scroll-view>
		</view>
		
		<tabbar :url="'/pages/index/new-serve'"></tabbar>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar.vue'
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				chaxun:[
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/96be838fdb6ecef3c7127335f665d244.png',
						title:'收入纳税明细',
						subtitle:'查看综合所得收入和纳税明细',
						link:'/pages/index/bill_check'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/07edc693de6656701b55a208fcf99f75.png',
						title:'申报记录',
						subtitle:'查看历史申报记录',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/789e6e0dcf8715d7c84db6930ec854de.png',
						title:'异议申诉',
						subtitle:'查询最新申诉记录和结果',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/af4809e387460c1040576b4e0c2537da.png',
						title:'税务文书',
						subtitle:'查看电子税务文书信息',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/3b9ae3354aa2dad6b1d0b5b333d5129b.png',
						title:'涉税专业服务机构',
						subtitle:'查询全国涉税专业服务机构信息',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/7d37cdd3880dfd59c245e75dd0ed70aa.png',
						title:'备案信息',
						subtitle:'查询备案信息',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/62aab2dc1bef1a1661246e3b14377efe.png',
						title:'票据查验',
						subtitle:'查验纳税记录等税收票证信息真伪',
						link:'/'
					},
				],
				
				fapiao:[
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/fa7c14fd1cb27018b35b9bef8ebf4d76.png',
						title:'扫码开票',
						subtitle:'扫描开票二维码开具发票',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/399988db7f6dd06eaef995b3002674d5.png',
						title:'发票抬头',
						subtitle:'维护常用的单位或个人抬头',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/035afcbecbef527c59e3c9b226dfe46b.png',
						title:'我的票夹',
						subtitle:'查询和管理数电发票',
						link:'/'
					},
				],
				
				fuwu:[
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/e795da5aa07e4372714df42780c9c528.png',
						title:'热点问题',
						subtitle:'获取当下热点问题与解答',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/e5d6803a725636aa4d95a50ffb69dfaf.png',
						title:'政策解读',
						subtitle:'了解最新税收政策与解读',
						link:'/'
					},
					{
						pic:'http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/751da119d3fee1d2f8180e9ee97807f0.png',
						title:'办税指南',
						subtitle:'为办税提供指南',
						link:'/'
					},
				],
				
				scrollviewHigh:0,
				
			};
		},
		onShow() {
			uni.hideTabBar();
			this.init();
		},
		methods:{
			pathClick(url){
				if( url == '/' ) return this.$util.Tips({ title:'功能开发中' })
				uni.navigateTo({
					url: url
				})
			},
			/*初始化*/
			init() {
				let _this = this;
				uni.getSystemInfo({
					success(res) {
						_this.phoneHeight = res.windowHeight;
						let h = _this.phoneHeight - 100;
						_this.scrollviewHigh = h;
					}
				});
			},
		}
	}
</script>

<style lang="less">
	page{ background-color: #F5F6FA !important; }
	.serve-new{
		
		.scroll-y{
			width: 100%;
		}
		
		.topbg{
			width: 100%;
			height: 200rpx;
			background-image: url('http://83aa400af464c76d.rongyide.vip/uploads/attach/2024/01/20240114/289660de902bb3c17fb63a1f4f147936.png');
			background-size: 100% 100%;
			
			.title{
				font-size: 44rpx;
				color: #ffffff;
				letter-spacing: 4rpx;
			}
			.subtitle{
				margin-left: 30rpx;
				color: #ffffff;
				font-size: 26rpx;
				opacity: 0.5;
				letter-spacing: 4rpx;
				margin-top: 20rpx;
			}
		}
		
		.main{
			width: 100%;
			// height: 100%;
			border-radius: 40rpx;
			padding: 30rpx;
			margin-top: -30rpx;
			position: relative;
			background-color: #F5F6FA;
			
			.banshui{
				color: #202328;
				font-size: 28rpx;
			}
			
			.bs-nav{
				width: 100%;
				background-color: #ffffff;
				border-radius: 15rpx;
				// padding: 20rpx;
				margin-top: 20rpx;
				padding-top: 20rpx;
				
				.item{
					height: 130rpx;
					margin-bottom: 20rpx;
				}
				.meun{
					
					.mpic{
						width: 210rpx;
						height: 250rpx;
					}
				}
				.bs-bott{
					width: 100%;
					height: 150rpx;
				}
			}
			
			.bs-box{
				width: 100%;
				background-color: #ffffff;
				border-radius: 15rpx;
				padding: 25rpx 6rpx;
				
				.item{
					width: 210rpx;
					height: 240rpx;
					background-color: #F7F8FA;
					border-radius: 15rpx;
					margin-left: 15rpx;
					margin-bottom: 15rpx;
					padding: 20rpx 25rpx 10rpx 20rpx;
					
					.pic{
						width: 60rpx;
						height: 60rpx;
						margin: 10rpx 0;
					}
					.title{
						font-size: 22rpx;
						color: #202328;
						font-weight: bold;
					}
					.subtitle{
						font-size: 20rpx;
						color: #808185;
						margin-top: 10rpx;
					}
				}
			}
			
		}
		
		
	}
</style>
